iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Modern Web

React Native & Redux 初步探討系列 第 16

Day 16 To Do List - 切版 1

  • 分享至 

  • xImage
  •  

第 16 天~

在前面說了那麼多的理論,

今天我們試著做一個簡單的東西,

就是大家都很不陌生的 TO。DO。LIST

首先先開個新專案出來吧

react-native init todoList

再來在專案的根目錄上,我們建一個 src 來存放我們的開發的程式碼,

App.js 放入 src資料夾裡,

調整 index.jsApp component 的位置,

這樣我們專案的初始化算是完成了

結構大概是這樣
https://ithelp.ithome.com.tw/upload/images/20211001/20112878Asp3tQqhd0.png

先來決定 ToDoList 要有什麼功能:

  • 新增代辦事項
  • 完成代辦事項
  • 搜尋
  • 全部完成
  • 代辦事項列表

那我們的最終結果大概是這樣
https://ithelp.ithome.com.tw/upload/images/20211001/20112878ZZp0NDRBzR.png

那首先,

我們先做橘色那塊,

內容有:

一個標題

因為 react-native 沒有提供 h1、 h2 ...

所以我們只能用 Text component 然後自己去刻一個出來

一個輸入框

使用 react-native 提供的 TextInput component

TextInput 相當於 html input,

比較常用到的 value 、 onchange、 placeholder 這些屬性都會有,

當然 TextInput 還有一些額外的屬性,

可以在官網上研究看看喔

三個按鈕

按鈕來說, react-native 是有提供我們一個 Button component,

但是, android 跟 ios 的樣式不一樣,

既然這樣,那我們使用別的方式...自己手動刻一個

使用 TouchableOpacity component 搭配 Text component

大概是這樣:

<TouchableOpacity>
  <Text>Button</Text>
</TouchableOpacity>

TouchableOpacity 是 react-native 提供偵測 touch 的反應,並且當按下時,可以有 按下去 的效果

那整個出來的結構大約是這樣

const App = () => {
  return (
    <SafeAreaView>
      <View>
        <Text>My To Do List</Text>
        <TextInput />
        <View>
          <TouchableOpacity>
            <Text>Add</Text>
          </TouchableOpacity>
          <TouchableOpacity>
            <Text>Search</Text>
          </TouchableOpacity>
          <TouchableOpacity>
            <Text>Complete All</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

假如我們不加任何樣式,

結果畫面會是這樣的,

https://ithelp.ithome.com.tw/upload/images/20211001/201128788U6kUKVmPH.png

嗯... 亂七八糟的,

這時我們就把樣式給加進來,

使用 StyleSheet.create

我們先設定幾個 style

  • root
  • header
  • title
  • input
  • button
  • buttonText
  • buttonGroup
const styles = StyleSheet.create({
  root: {},
  header: {},
  title: {},
  input: {},
  buttonGroup:{},
  button:{},
  buttonText:{}
});

分別對應到 component

const App = () => {
  return (
    <SafeAreaView style={styles.root}>
      <View style={styles.header}>
        <Text style={styles.title}>My To Do List</Text>
        <TextInput style={styles.input} />
        <View style={styles.buttonGroup}>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonText}>Add</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonText}>Search</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonText}>Complete All</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

先調整 header

{
  backgroundColor: '#f44336',
  flexDirection: 'column',
  alignItems: 'center',
  paddingVertical: 10,
},

這時畫面長這樣,
https://ithelp.ithome.com.tw/upload/images/20211001/20112878HCUp0g2m3M.png

在設定 title & input

title: {
  color: '#fff',
  fontSize: 30,
  fontWeight: 'bold',
  marginVertical: 20,
},
input: {
  backgroundColor: '#fff',
  width: '80%',
  paddingVertical: 5,
},

結果會是:

https://ithelp.ithome.com.tw/upload/images/20211001/20112878DXUtvLDTlo.png

最後在把按鈕樣式加上去,

buttonGroup: {
  flexDirection: 'row',
  width: '80%',
  justifyContent: 'space-around',
},
button: {
  flex: 1,
  backgroundColor: '#d9d9d9',
  borderColor: '#7c7c7c',
  borderWidth: 1,
  padding: 5,
},
buttonText: {
  textAlign: 'center',
  color: '#555',
},

結果:

https://ithelp.ithome.com.tw/upload/images/20211001/20112878k7Nt8BYfI0.png


上一篇
Day 15 Platform module
下一篇
Day 17 To Do List - 切版 2
系列文
React Native & Redux 初步探討33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言